<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
    test(() => assert_selection(
        [
            '<div contenteditable style="word-wrap: break-word;">',
                '<div><b>a</b>^b|</div>',
            '</div>'
        ].join(''),
        'bold',
        [
            '<div contenteditable style="word-wrap: break-word;">',
                '<div><b>a^b|</b></div>',
            '</div>'
        ].join('')),
        'Extend previous B');

    test(() => assert_selection(
        [
            '<div contenteditable style="word-wrap: break-word;">',
                '<div><b>a|</b>c</div>',
            '</div>'
        ].join(''),
        'insertText b',
        [
            '<div contenteditable style="word-wrap: break-word;">',
                '<div><b>ab|</b>c</div>',
            '</div>'
        ].join('')),
        'Insert a character into existing B');

    test(() => assert_selection(
        [
            '<div contenteditable style="word-wrap: break-word;">',
                '<div><b>a|</b>c</div>',
            '</div>'
        ].join(''),
        selection => {
            selection.document.execCommand('bold'); // disable bold
            selection.document.execCommand('insertText', false, 'b');
        },
        [
            '<div contenteditable style="word-wrap: break-word;">',
                '<div><b>a</b>b|c</div>',
            '</div>'
        ].join('')),
        'Simulate Ctrl+B then typing a character');

    test(() => assert_selection(
        [
            '<div contenteditable style="word-wrap: break-word;">',
                '<div><div><b>a^</b></div><div>b|</div></div>',
            '</div>'
        ].join(''),
        'bold',
        [
            '<div contenteditable style="word-wrap: break-word;">',
                '<div><div><b>a^</b></div><div><b>b|</b></div></div>',
            '</div>'
        ].join('')),
        'B element should not spread beyond DIV');

    test(() => {
      assert_not_equals(window.internals, undefined,
                        'This test requires clipboard access');

      assert_selection(
        [
            '<div contenteditable>',
                'one two three<b>\u00A0four|</b>',
            '</div>'
        ].join(''),
        selection => {
          selection.setClipboardData('one');
          selection.document.execCommand('paste');
        },
        [
            '<div contenteditable>',
                'one two three<b>\u00A0four</b>one|',
            '</div>'
        ].join(''));
    }, 'Pasting at style boundary does not crash or produce empty style span(s)');
</script>
